<template>
    <div class="headtop">
        <div class="headbody" v-if="business.id">
            <div>
                <van-image width="5rem" height="5rem" fit="cover" radius="1.2rem" :src="avatarimg" />
            </div>
            <div>
                <p class="">{{ business.username }}</p>
                <p class="">账号：{{ business.usernumber }}</p>
                <p class="">会员：{{ business.vipendtime_text }}</p>
            </div>
        </div>

        <div class="headbody" v-else>
            <div>
                <van-image width="6rem" height="6rem" fit="cover" radius="1.2rem" src="/assets/imgage.png" />
            </div>
            <div>
                <p id="login" @click="login()">点击登录</p>
            </div>
        </div>

        <div style="margin-top: 0.5rem;" v-show="business.id">
            <van-uploader style="cursor: pointer;" :after-read="afterRead" :max-count="1"
                accept="image/jpeg,image/png,image/webp,image/bmp,image/tiff">
                <p class="editimg" style="margin-left: 1rem;"><van-icon name="edit" />更换头像</p>
            </van-uploader>
            <button
                style="margin-left:1rem;background-color:red;padding: 0px 0.5rem;border-radius: 0.3rem;border: none;cursor: pointer;"
                class="logout" @click="logout()">退出登录</button>
        </div>
    </div>

    <router-link to="/user/email" class="router-link">
        <van-icon name="envelop-o" size="2rem" />
        &nbsp;&nbsp;
        绑定邮箱
        <van-icon name="arrow" class="right-icon" />
    </router-link>

    <router-link to="/user/userprofile" class="router-link">
        <van-icon name="edit" size="2rem" />
        &nbsp;&nbsp;
        资料编辑
        <van-icon name="arrow" class="right-icon" />
    </router-link>

    <router-link to="/user/password" class="router-link">
        <van-icon name="lock" size="2rem" />
        &nbsp;&nbsp;
        修改密码
        <van-icon name="arrow" class="right-icon" />
    </router-link>

    <router-link to="/user/problem" class="router-link">
        <van-icon name="service-o" size="2rem" />
        &nbsp;&nbsp;
        疑难解答
        <van-icon name="arrow" class="right-icon" />
    </router-link>

    <router-link to="/user/order" class="router-link">

        <van-icon name="orders-o" size="2rem" />
        &nbsp;&nbsp;
        我的订单
        <van-icon name="arrow" class="right-icon" />
    </router-link>

    <router-link to="#" class="router-link" @click="DeleteCode">
        <van-icon name="close" size="2rem" />
        &nbsp;&nbsp;
        注销账号
        <van-icon name="arrow" class="right-icon" />
    </router-link>

    <Tabbar />

</template>

<script setup>
const { proxy } = getCurrentInstance();
const business = ref(proxy.$business.value)
const avatarimg = ref(business.value.avatar_text)
const params = {
    id: business.value.id
}

// 登录
const login = () => {
    proxy.$router.push('/login')
}

// 注销账号
const DeleteCode = () => {
    proxy.$confirm({
        title: '注销账号',
        message: '是否注销当前账号？\n\n注意事项：\n1. 注销后所有数据将永久删除，无法恢复\n2. 注销后，会员信息也将消除\n3.确认后立即生效 '
    }).then(async () => {
        const id = business.value.id
        const res = await proxy.$http.post({
            url: '/user/logout',
            params: {
                id
            }
        })
        if (res.code == 1) {
            proxy.$toast(res.msg)
            proxy.$router.push('/login')
        }
    }).catch(() => {
        proxy.$toast('取消注销')
    })
}

//退出登录
const logout = () => {
    proxy.$confirm({
        title: '退出登录',
        message: '是否退出登录？'
    }).then(() => {
        proxy.$business.value = {}
        proxy.$toast('退出登录')
        proxy.$router.push('/login')
    }).catch(() => {
        proxy.$toast('已取消')
    })
}

//头像上传
const afterRead = async (file) => {
    avatarimg.value = file.objectUrl;
    params.avatar = file.file

    // formData.append('avatar', file.file);
    const res = await proxy.$http.upload({
        url: '/user/avatar',
        params
    })

    if (res.code == 1) {
        proxy.$toast(res.msg)
        proxy.$router.push('/user')
    } else {
        proxy.$toast(res.msg)
    }
};

</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.headtop {
    width: 100%;
    height: 9.5rem;
    background-color: rgb(25, 25, 25);
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 处理bug */
    margin-bottom: 0.5rem;
}

.headbody {
    display: flex;
    width: 100%;
    height: 5rem;
    margin-top: 1.5rem;
}

.headbody div {
    margin-left: 0.5rem;
}

.headbody div>p:nth-child(1) {
    font-size: 1.3rem;
    line-height: 2rem;
    /* 缩进 */
    text-indent: 0.8rem;
    /* 字间距 */
    letter-spacing: 0.1rem;
    color: white;
}

.headbody div>p:nth-child(2) {
    font-size: 1rem;
    line-height: 2rem;
    text-indent: 0.8rem;
    color: aliceblue;
}

.headbody div>p:nth-child(3) {
    font-size: 0.8rem;
    line-height: 1rem;
    text-indent: 0.8rem;
    color: aliceblue;
}

#login {
    text-decoration: underline;
    margin-top: 50%;
    transform: translateY(-50%);
    font-size: 1.7rem;
    opacity: 0.7;
}


#login:hover {
    color: purple;
}

.router-link {
    display: block;
    width: 100%;
    height: 4.5rem;
    font-size: 1.2rem;
    line-height: 4.5rem;
    background-color: rgba(25, 25, 25);
    border-top: rgba(255, 255, 255, 0.1) solid 0.1rem;
    color: aliceblue;
}

.router-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: purple;
}

.right-icon {
    float: right;
    margin-right: 1rem;
    line-height: 4rem;
}

.del-p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logout:hover {
    color: rgb(58, 129, 192);
}

.editavatar:hover {
    color: rgb(34, 46, 57);
}

.editimg {
    margin-left: 1rem;
    margin-top: 0.5rem;
    /* 下划线*/
    text-decoration: underline;
    background: linear-gradient(90deg,
            rgba(209, 64, 64, 0.8),
            rgba(117, 250, 255, 0.9),
            rgba(255, 77, 181, 0.8));
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 4px rgba(255, 77, 181, 0.2);
    animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% center;
        text-shadow: 0 1px 2px rgb(250, 71, 71);
    }

    50% {
        background-position: 100% center;
        text-shadow: 0 2px 3px rgb(93, 188, 243);
    }

    100% {
        background-position: 0% center;
        text-shadow: 0 1px 2px rgba(244, 70, 171, 0.2);
    }
}
</style>
